<template>
  <div  id="myChart"  ></div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-gl'; 
import tdTheme from './theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar3d',
  props: {
    value: Object,
    text: String,
    subtext: String
  },
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
  mounted () {
    // this.$nextTick(() => {
      var xdata=[];
var ydata=[''];
var obj=JSON.parse('[{"name":"深圳","value":10},{"name":"辽宁","value":20},{"name":"黑龙江","value":30},{"name":"深dd圳","value":56},{"name":"深dd圳","value":56},{"name":"深dd圳","value":56},{"name":"深dd圳","value":56},{"name":"深dd圳","value":56},{"name":"深dd圳","value":56}]');
    var data=echarts.util.map(obj, function(item, index) {
        return {
        //index值x值，2指示y值，item.value指z值。其中x值代表省的变化，z值代表信用的变化
            value: [ index,2, item.value],
    //柱状图的填充颜色
            itemStyle:{
                color:'#66D9EF'
            }
        }

    });

    for(var i=0;i<obj.length;i++){
        xdata.push(obj[i].name);//获取省名
    }
    // var hours=[123,435,657];
    // var _this=this;
    // initChart(_this,xdata,ydata,data)
 
// function initChart(_this,xdata,ydata,citydata){
    var option = {
    tooltip: {
        type: ''
    },
    xAxis3D: {
        type: 'category',
        name: '',
        data: xdata,
        axisTick: {
            show: true
        },
        axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF'
}}
    },
    yAxis3D: {
        type: 'category',
        name: '',
        data: ydata,
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(0,0,0,0)'
            }
        },
         axisLabel: {
show: true,
textStyle: {
color: '#FFFFFF'
}}
    },
    zAxis3D: {
        type: 'value',
        name: '',
        axisTick: {
            show: false
        },
    },
    grid3D: {
        boxWidth: 200,
        boxDepth: 80,
        zlevel: -10,
        axisPointer: {
            show: true
        },
        light: {
            main: {
                intensity: 1.2
            },
            ambient: {
                intensity: 0.3
            }
        },
        viewControl: { 
// projection: ‘orthographic’ 
autoRotate :true, //是否开启自动3d 旋转 
distance: 180,
maxDistance :200, //最大的值 （默认400） 
minDistance :120 //是距离 最小值 （默认40） 与最大值相等时 则不能够放大与缩小 
}
    },
    series: [{
        type: 'bar3D',
        name: '',
        barSize: 10,
        data: data,
        label: {
            show: true,
            textStyle: {
                fontSize: 16,
                borderWidth: 1
            }
        },
        itemStyle: {
            opacity: 0.4
        },
        emphasis: {
            label: {
                textStyle: {
                    fontSize: 20,
                    color: '#900'
                }
            }
        }
    }]
}
// this.dom = echarts.init(this.$refs.dom, 'tdTheme')
//       this.dom.setOption(option)
      let myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption(option)
    // })
  },
  beforeDestroy () {
    // off(window, 'resize', this.resize)
  }
}
</script>
